<template>
	<div id="dashboard">
		<div class="tabs">
			<el-tabs v-model="activeName">
				<el-tab-pane label="状态概览" name="topData"></el-tab-pane>
				<el-tab-pane label="访客地图" name="visitorMap"></el-tab-pane>
				<el-tab-pane label="7日访客" name="visitor7"></el-tab-pane>
				<el-tab-pane label="30日访客" name="visitor30"></el-tab-pane>
			</el-tabs>
		</div>
		<keep-alive>
		<top-data v-if="activeName=='topData'"></top-data>
		<visitor-map-charts v-else-if="activeName=='visitorMap'"></visitor-map-charts>
		<visitor7 v-else-if="activeName=='visitor7'"></visitor7>
		<visitor30 v-else-if="activeName=='visitor30'"></visitor30>
		</keep-alive>
	</div>
</template>

<script>
	import visitor7 from '@/components/dashboard/visitor7.vue'
	import visitor30 from '@/components/dashboard/visitor30.vue'
	import visitorMapCharts from '@/components/dashboard/visitorMapCharts.vue'
	import topData from '@/components/dashboard/topData.vue'
	export default {
		//因为图表比较占内存，所以注释起来name，让tagsView不缓存此页面
		// name: 'Dashboard',
		components: {
			visitorMapCharts,
			topData,
			visitor7,
			visitor30
		},
		data() {
			return {
				inp: '',
				activeName: 'topData'
			}
		},
		methods: {
			change(obj) {
				console.log(obj)
			}
		},
	}
</script>

<style lang="scss">
	#dashboard {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.tabs {
			margin: 0 50px;
		}
	}
</style>
